<template>
  <div class="page-container">
    <el-card class="full-card">
      <!-- 操作栏 -->
      <div class="toolbar">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增作业</el-button>
        <div class="searBtn">
          <el-input
            v-model="workName"
            placeholder="搜索作业主题"
            clearable
            @clear="fetchData"
            @keyup.enter.native="fetchData"
          />
        </div>

      </div>

      <!-- 表格部分：设置高度+overflow -->
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          height="100%"
        >
          <el-table-column type="index" label="序号" width="50"/>
          <el-table-column prop="workName" label="作业主题"/>
          <el-table-column prop="sequence" label="作业标签">
            <template #default="{row}">
              <el-tag
                v-for="tag in row.workTag"
                :key="tag"
                style="margin-left: 5px"
              >
                {{ tag }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="文件">
            <template #default="{ row }">
              <div class="file-cell">
                <el-tooltip content="点击预览" placement="top">
        <span
          class="file-name"
          @click="handlePreview(row)"
        >
          {{ row.fileName }}
        </span>
                </el-tooltip>
                <div class="file-actions">
                  <!-- 下载按钮 -->
                  <el-tooltip content="下载附件" placement="top">
                    <i class="el-icon-download file-icon" @click="handleDownload(row)"></i>
                  </el-tooltip>
                  <!-- 上传按钮，通过 el-upload 隐藏上传框 -->
                  <el-tooltip content="上传或替换" placement="top">
                    <el-upload
                      :action="uploadUrl"
                      :headers="uploadHeaders(row)"
                      :show-file-list="false"
                      :data="{ id: row.id }"
                      :on-success="(res, file) => handleUploadSuccess(res, file, row)"
                    >
                      <i class="el-icon-upload file-icon"></i>
                    </el-upload>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="100"/>
          <el-table-column label="操作" width="180">
            <template #default="{row}">
              <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 100]"
        :current-page="pageNum"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        class="pagination"
      />
    </el-card>

    <add-edit-dialog
      v-if="dialogVisible"
      :dialog-title="dialogTitle"
      :work-form-parent="workForm"
      :dialog-visible.sync="dialogVisible"
      @afterTask="()=>{dialogVisible=false;fetchData()}"
    />

  </div>
</template>

<script>
import AddEditDialog from '@/views/wordLibrary/dbWork/addEditDialog.vue'
import { deleteById, getDownloadUrl, selectPage } from '@/api/webDiskDbWorkFileInfo'

export default {
  components: { AddEditDialog },
  data() {
    return {
      uploadUrl: `${process.env.VUE_APP_BASE_API}/webDiskDbWorkFileInfo/upOrReplaceWorkFile`,
      loading: false,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dialogVisible: false,
      dialogTitle: '新增作业',
      workName: '',
      workForm: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    uploadHeaders(row) {
      return {
        Authorization: this.$store.getters.token
      }
    },
    fetchData() {
      this.loading = true
      selectPage({
        page: { pageNum: this.pageNum, pageSize: this.pageSize },
        param: { workName: this.workName }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total * 1
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    handleAdd() {
      this.dialogTitle = '新增作业'
      this.workForm = {
        workTag: [],
        workName: '',
        id: ''
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑作业信息'
      this.workForm = Object.assign({}, row)
      this.dialogVisible = true
    },
    handleDelete(id) {
      this.$confirm('确定删除该作业吗？', '提示', {
        type: 'warning'
      }).then(() => {
        deleteById({ id: id }).then(() => {
          this.$message.success('删除成功')
          this.fetchData()
        }).catch(() => {
          this.$message.error('删除失败，请稍后再试...')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handlePreview(row) {
      // 预览逻辑，可以打开新窗口或弹窗
      this.$message.info(`预览文件: ${row.fileName}`)
    },
    handleDownload(row) {
      // 下载逻辑，建议后端返回真实链接或文件流
      getDownloadUrl({ id: row.id }).then(res => {
        window.open(res, '_blank')
      }).catch(() => {
        this.$message.error('文件下载失败，请稍后再试...')
      })
    },
    handleUploadSuccess(response, file, row) {
      this.$message.success('上传成功')
      this.fetchData()
    }
  }
}
</script>
<style scoped>
.page-container {
  height: calc(100vh - 50px);
  padding: 20px;
  box-sizing: border-box;
}

.full-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table-container {
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 219px);
}

/* 保证分页栏不被挤压 */
.pagination {
  margin-top: 10px;
  text-align: right;
}

.searBtn {
  display: flex;
  align-items: stretch; /* 让右侧按钮盒子和输入框等高 */
  gap: 8px; /* 输入框与按钮之间的间距，可根据需要调整 */
}

.searBtn /deep/ .el-input__inner {
  padding: 0 0 0 15px;
}

.button-box {
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  justify-content: space-between; /* 让按钮平分高度 */
  height: 100%; /* 高度继承自父容器，即输入框 */
}

.button-box .el-button {
  flex: 1; /* 平分按钮高度 */
  margin: 0; /* 去除按钮间外边距 */
  padding: revert
}

.toolbar .el-button {
  padding: unset;
  width: 72px;
  height: 32px;
}

.file-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-name {
  color: #409EFF;
  cursor: pointer;
  transition: color 0.3s;
}

.file-name:hover {
  color: #66b1ff;
}

.file-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.file-icon {
  font-size: 16px;
  color: #909399;
  cursor: pointer;
  transition: color 0.3s;
}

.file-icon:hover {
  color: #409EFF;
}

</style>

